<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="stylesheet" th:href="@{/static/element/index.css}"/>
</head>
<body>
<div id="app">
    <template>
        <div style="margin-bottom:18px;">
            <el-input style="width: 13%" v-model="queryForm.swaggerUrl" placeholder="swagger地址"></el-input>
            <el-input style="width: 13%" v-model="queryForm.url" placeholder="接口地址"></el-input>
            <el-input style="width: 13%" v-model="queryForm.title" placeholder="描述"></el-input>
            <el-button @click="handleQuery">查询</el-button>
            <el-button v-if="button.export" @click="handleExport">导出</el-button>
        </div>
        <el-table :data="tableData" border ref="multipleTable">
            <el-table-column type="selection" width="40"></el-table-column>
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-divider content-position="left">请求参数</el-divider>
                    <el-form label-position="left" inline class="demo-table-expand">
                        <el-table :data="props.row.requestList" size="mini" :header-cell-style="{background:'#CFD3DA'}" border>
                            <el-table-column prop="name" label="参数名"></el-table-column>
                            <el-table-column prop="comment" label="描述"></el-table-column>
                            <el-table-column prop="type" label="类型"></el-table-column>
                            <el-table-column prop="required" label="是否必填"></el-table-column>
                        </el-table>
                    </el-form>
                    <el-divider content-position="left">响应参数</el-divider>
                    <el-form label-position="left" inline class="demo-table-expand">
                        <el-table :data="props.row.responseList" size="mini" :header-cell-style="{background:'#CFD3DA'}" border>
                            <el-table-column prop="name" label="参数名"></el-table-column>
                            <el-table-column prop="comment" label="描述"></el-table-column>
                            <el-table-column prop="type" label="类型"></el-table-column>
                        </el-table>
                    </el-form>
                </template>
            </el-table-column>
            <el-table-column prop="url" label="接口地址"></el-table-column>
            <el-table-column prop="title" label="描述" :formatter="formatTitle"></el-table-column>
            <el-table-column prop="method" label="请求方法"></el-table-column>
        </el-table>
    </template>
</div>
</body>
<script th:src="@{/static/js/axios.min.js}"></script>
<script th:src="@{/static/js/common.js}"></script>
<script th:src="@{/static/js/vue.min.js}"></script>
<script th:src="@{/static/element/index.js}"></script>
<script th:src="@{/static/js/jquery.min.js}"></script>
<script th:src="@{/static/layer/layer.js}"></script>
<script>
    new Vue({
        el: '#app',
        data() {
			return {
                tableData: [],
                button: {
                    export: false
                },
                queryForm: {
                    swaggerUrl: '',
                    url: '',
                    title: ''
                }
			}
        },
        created() {
            this.handleQuery();
			let sysButtons = JSON.parse(localStorage.getItem("jsbb-sysButtons"));
			this.button.export = sysButtons.indexOf("/tool/api/export") > -1;
        },
        methods: {
            formatTitle: function(row, column, cellValue, index) {
                return row.tags + "-" + row.title;
            },
            handleQuery() {
                let queryParam = {
                    swaggerUrl:this.queryForm.swaggerUrl,
                    url:this.queryForm.url,
                    title:this.queryForm.title
                };
                query('/tool/api/list', queryParam, this);
            },
            handleExport() {
                let selectedRows = this.$refs.multipleTable.selection;
                let urlList = selectedRows.map(item => {
                    return item.url;
                });
                if (urlList.length <= 0) {
                    parent.layer.msg('请选择数据');
                } else {
                    let queryParam = {
                        swaggerUrl:this.queryForm.swaggerUrl,
                        url:this.queryForm.url,
                        title:this.queryForm.title,
                        urlList:urlList
                    };
                    exports('/tool/api/export', queryParam);
                }
            }
        }
    });
</script>
</html>
